﻿
@{
    ViewData["Title"] = "自动报表统计";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h1>@ViewData["Title"]</h1>

<div id="pageContainer">
    <el-row :gutter="5">

        <el-col :span="5">
            时间：
            <el-date-picker v-model="lkdate" v-on:change="Init" type="month" placeholder="选择月" size="medium">
            </el-date-picker>
        </el-col>
        <el-col :span="5">
            本月共发送:  <el-tag type="success">{{total}}</el-tag>个报表
        </el-col>
    </el-row>


    <el-row>


        <ve-histogram :data="chartData"></ve-histogram>
    </el-row>

</div>
@section styles{
    <link href="~/js/v-charts/v-charts.min.css" rel="stylesheet" />
}
@section scripts{


    <script src="~/js/base.js"></script>
    <script src="~/js/v-charts/echarts.min.js"></script>
    <script src="~/js/v-charts/v-charts.min.js"></script>
    <script>
        var pageVue = new Vue({
            el: '#pageContainer',
            data: {
                loading: false,
                lkdate: "@DateTime.Now.ToString("yyyy-MM-01")",
                chartData: {
                    columns: ['日期', '数量'],
                    rows: [

                    ]
                },
                data: [],
                total: 0,

            },
            methods: {

                /*搜索数据*/
                search: function () {
                    this.queryData();
                },

                queryData: function () {
                    let query = {};
                    var _st = new Date(this.lkdate);
                    var _start = kede.dateformat(_st, 'yyyy-MM-01');
                    var _end = kede.dateformat(new Date(_st.setMonth(_st.getMonth() + 1)), 'yyyy-MM-dd');
                    kede.get("/api/Data/GetEmailtask_logs", { start: _start, end: _end }, function (result) {
                        pageVue.total = result.data.Item1;
                        pageVue.chartData.rows = result.data.Item2;
                    }, "json");
                },
                Init: function () {
                    pageVue.search();
                }
            }

        });
        pageVue.search();


    </script>
}